<template>
  <div class="container" v-title data-title="临时充值" v-bind:class="{overflow_con:fadeRoles == true}" >
    <div v-if="!outApp">
      <!--<div class="roles">
        <a v-on:click="fadeRoles = true"></a>
      </div>-->
      <div class="type">
        <h2>充值金额</h2>
        <label v-for="item in pushBacks">
          <input name="pushMoneys" type="radio" v-bind:value="item.pushMoney" v-model="value" />
          <i class="icon-money icon"></i>
          充{{item.pushMoney}}元
          <i class="selectIcon" v-bind:class="{selected:value == item.pushMoney}"></i>
        </label>
      </div>
      <div class="type">
        <h2>支付方式</h2>
        <label><input name="chargeType" type="radio" value="1" v-model="type" />
          <i class="icon-alipay icon"></i>支付宝支付
          <i class="selectIcon" v-bind:class="{selected:type == 1}"></i>
        </label>
        <label><input name="chargeType" type="radio" value="2" v-model="type" />
          <i class="icon-wepay icon"></i>微信支付
          <i class="selectIcon" v-bind:class="{selected:type == 2}"></i>
        </label>
      </div>
      <a v-on:click="sendPayMsg()" class="btn" >支&nbsp;付</a>
      <transition name="fade-in">
        <div class="fade_box" v-if="fadeRoles">
          <div class="fade_bg" v-on:click="fadeRoles = false"></div>
          <div class="fade_out">
            <h2>活动规则</h2>
            <p>1、活动期间充值返现的金额3个月内使用有效，逾期失效；<br/>
              2、所返金额可在“APP-个人中心-我的钱包-返现余额”中查看；<br/>
              3、骑行扣款优先扣除返现余额，骑行保险费0.2元/次从充值余额中扣除；<br/>
              4、所有返现余额仅限用于支付骑行费用，不能用于支付保险费，不可支付押金、转移、转赠和提现。<br/>
              5、本活动为公务员专享特殊优惠，限内部推荐使用。
            </p>
            <p class="tips">*活动最终解释权归本平台所有</p>
            <a class="btn_close"  v-on:click="fadeRoles = false">我知道了</a>
          </div>
        </div>
      </transition>
    </div>
    <div v-else>
      <div class="thumbnail">
        <img src="../styles/asset/charge/share_02.png">
      </div>
      <div class="thumbnail" v-on:click="download()">
        <img src="../styles/asset/charge/share_03.png">
      </div>
    </div>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script>
  import Simplert from '../../components/dialog/dialog.vue'
  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
            if(a.href.split('?').length > 2)
            {
                return false;
            }else{
              let ret = {},
                param = a.href.split('?')[1],
                seg = param.split('&'),
                len = seg.length,
                i = 0,
                s;
              for (; i < len; i++) {
                if (!seg[i]) {
                  continue;
                }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
              }
              return ret;
            }
        })()
      }
    }
  };
  export default {
    data () {
      return {
        id:'',
        type:'',
        value:'',
        pushBacks: [],
        img: require('../styles/asset/share.jpg'),
        fadeRoles:false,
        outApp:false
      }
    },
    mounted(){
      //native充值结果返回
      window.payResult = (result,msg)=>{
        if(result === 'true' || result == 1)
        {
          let userAgentObj = navigator.userAgent;
          if(userAgentObj.match(/Android/i)){
            window.control.refreshWallet();
          }else if(userAgentObj.match(/iPhone/i))
          {
            refreshWallet();
          }
          this.type = "";
          this.value = "";
          this.open('充值成功！',false,'','','fade_success',function(){});
        }else{
          this.open(msg,false,'','','fade_alert',function(){});
        }
      };
      const that = this;
      const url = window.location.href;
      if(filters.parseURL(url).params === false){
        this.outApp = true;
      }
      this.id = filters.parseURL(url).params.id;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getActivity();
      });
      let root = process.env.MAIN_ROOT;
      this.$util.sendShareMessage("临时充值","", root+this.img,url);
    },
    components: {
      Simplert
    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      download(){
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/Android/i)){
          window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
        }else if(userAgentObj.match(/iPhone/i)) {
          window.location.href = "xingjiakejiIOS:///#/activity/getcouponDaily";
          window.setTimeout(function(){
            window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
          },2000)
        }else{
          window.location.href="http://download.xingjiakeji.com/";
        }
      },
      sendPayMsg(){
        if(!this.type)
        {
          this.open('请选择充值方式！',false,'','','fade_alert',function(){});
          return;
        }
        if(!this.value)
        {
          this.open('请选择充值金额！',false,'','','fade_alert',function(){});
          return;
        }
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/Android/i)){
          window.control.payMsg(this.type,this.value,this.id);
        }else if(userAgentObj.match(/iPhone/i)) {
          payMsg(this.type,this.value,this.id);
        }
      },
      getActivity(){
        if(!this.token){
            this.outApp = true;
            return false;
        }
        let that = this;
        this.$api.post('/activity/v1/authApi/detail?id='+this.id,'',s=>{
          let rule = s.module.rule;
          that.pushBacks = JSON.parse(rule).pushBacks;
        },f=>{
          this.open(f.errorMessage);
        },{
          "token": this.token
        })
      }
    }
  };
</script>

<style scoped>
@import "../styles/styles.css";
a{ font-size: 14px;}
.container{ height: 100%;}
.container>div{ width: 100%; height: 100%;}
.thumbnail,.thumbnail>img{ width: 100%;}
.overflow_con{ overflow-y: hidden;}
.roles{ position: relative;}
.roles>a{ width: 1.5rem; height: 0.6rem; display: block; position: absolute; top: 1.2rem; left: 0.2rem;}
.type{ font-size: 14px; padding: 0.42rem 0.42rem 0;}
.type em{ display: inline; font-style: normal; font-weight: 500; color: #ff5d2e;}
.type>label{ padding: 0.2rem 0; display: block; line-height: 0.4rem;}
.type>h2{ font-size: 14px; padding: 0.2rem 0;}
.type input{ display: none;}
.btn{ background: url("../styles/asset/charge/btn.png") no-repeat; background-size: contain; display: block; width: 7.18rem; margin: 0.42rem auto 0; height: 1.6rem; line-height: 1.34rem; text-align: center; color: #fff; padding: 0;  font-size: 14px;}
.roles{ background: url("../styles/asset/charge/cz_02.png") no-repeat; width: 100%; height: 2.57rem; background-size: contain;}
.icon{ background-size: contain; width: 0.4rem; height: 0.4rem; float: left; margin-right: 0.2rem;}
.icon-money{ background-image: url("../styles/asset/charge/dollar.png")}
.icon-alipay{ background-image: url("../styles/asset/charge/alipay.png")}
.icon-wepay{ background-image: url("../styles/asset/charge/wchat.png")}
.selectIcon{background: url("../styles/asset/charge/empty.png") no-repeat; background-size: contain; width: 0.3rem; height: 0.3rem; float: right; margin-top: 0.05rem;}
.selectIcon.selected{ background-image: url("../styles/asset/charge/right.png")}
.fade_box{
    position: fixed;
    display: flex;
    z-index: 999;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    align-items:center;
}
.fade_bg{ background-color: rgba(0,0,0,0.7); position: absolute; width: 100%; height: 100%;}
  .fade_out{ background-color: #fff; border-radius: 0.4rem; width: 5.8rem; font-size: 14px; margin: 0 auto; padding: 0.5rem 0.5rem 0; max-height:90%; overflow-y: scroll;
    animation-name: zoomIn;
    animation-duration: .3s;
    animation-fill-mode: both;
  }
  .fade_out>h2{ background: url("../styles/asset/charge/levy05.png") no-repeat center; background-size: contain; text-align: center; color: #ff5d2e; font-size: 18px; margin: 0 0.7rem; margin-bottom: 0.2rem;}
  .fade_out p{ line-height: 0.45rem; text-align: left; font-size: 12px;}
  .fade_out>.btn_close{ background-color: #f2f2f2; color: #ff5d2e; line-height: 0.8rem; text-align: center; margin-left: -0.5rem; margin-right: -0.5rem; display: block; border-radius: 0 0 0.4rem 0.4rem;}
.fade_out> p.tips{ color: #999999; text-align: right; margin-bottom: 0.4rem;}
@keyframes zoomIn {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
